<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>基本易加载器 - jQuery EasyUI 演示</title>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../easyloader.js"></script>
</head>
<body>
	<h2 title="Basic EasyLoader">基本易加载器</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div title="Click the buttons below to load components dynamically.">　　点击以下按钮可动态加载相应的组件。注：已设本地化为『zh_CN』，设主题为『black』。PC垂直滚动条＝移动设备摁住可滚区域（滚动条不可见）后上下拖动或在模拟器中直接使用鼠标滚轮。</div>
	</div>
	<div style="margin:10px 0;">
		<a href="#" class="easyui-linkbutton" onclick="load1()" title="Load Calendar">&nbsp;载入 日历&nbsp;</a>
		<a href="#" class="easyui-linkbutton" onclick="load2()" title="Load Dialog">&nbsp;载入 对话框&nbsp;</a>
		<a href="#" class="easyui-linkbutton" onclick="load3()" title="Load DataGrid">&nbsp;载入 数据网格&nbsp;</a>
	</div>
	<div id="cc"></div>
	<div id="dd"></div>
	<table id="tt"></table>
	<script type="text/javascript" src="../../easyloader.js"></script>
	<script>
		easyloader.locale = "zh_CN";	// 本地化
		easyloader.theme = "black";		// 主题
		function load1(){
			using('calendar', function(){
				$('#cc').calendar({
					width:180,
					height:180
				});
			});
		}
		function load2(){
			using(['dialog','messager'], function(){
				$('#dd').dialog({
					title:'对话框',
					width:300,
					height:200
				});
				$.messager.show({
					title:'info',
					msg:'对话框已创建。'
				});
			});
		}
		function load3(){
			using('datagrid', function(){
				$('#tt').datagrid({
					title:'<c>数据网格</c>',
					width:300,
					height:200,
					fitColumns:true,
					columns:[[
						{field:'productid',title:'产品编码',width:100, halign:'center'},
						{field:'productname',title:'产品名称',width:200, halign:'center'}
					]],
					data: [
						{"productid":"FI-SW-01","productname":"Koi"},
						{"productid":"K9-DL-01","productname":"Dalmation"},
						{"productid":"RP-SN-01","productname":"Rattlesnake"},
						{"productid":"RP-LI-02","productname":"Iguana"},
						{"productid":"FL-DSH-01","productname":"Manx"},
						{"productid":"FL-DLH-02","productname":"Persian"},
						{"productid":"AV-CB-01","productname":"Amazon Parrot"}
					]
				});
			});
		}
	</script>

</body>
</html>